<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/advanced.search.css" />
		<style type="text/css">
			.outer-box {
				height: 200px !important;
				border: solid 1px #0000ff;
			}
			.outer-box2 {
				height: 30px;
				line-height: 30px;
				border: solid 1px #FF0000;
			}

			.inner-box {
				overflow: auto;
			}

			.test {
				width: 100%;
				height: 30px;
				color: #FF0000;
				font-size: 16px;
				line-height: 30px;
				text-align: center;
			}

			.test2 {
				color: #00ff00;
			}
			
			.mui-bar-nav~.content-search-box {
				position: fixed;
				z-index: 999;
				top: 44px;
			}
			
			.mui-bar-nav~.content-search-box~.mui-content {
				padding-top: 80px;
			}
			
			.mui-content .mui-scroll .mui-slider.mui-fullscreen {
				position: relative;
				top: 0;
			}
			
			.mui-pull-bottom-tips {
				margin-bottom: 15px;
				text-align: center;
				color: #999999;
			}
			.brf {
				position: fixed;
				top: 0;
				left: 0;
				width: 200px;
				background: rgba(100, 100, 100, .2);
				color: red;
				z-index: 999;
				padding: 6px 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测试scroll</h1>
		</header>
		
		<!-- 搜索框 -->
		<div class="mui-input-row advanced-search content-search-box">
		    <span class="mui-icon mui-icon-search"></span>
		    <input id="searchInput" type="text" class="mui-input-clear" placeholder="请输入您要查询的关键字">
			<a href="#picture" class="mui-icon mui-icon-camera" style="display: inline-block;"></a>
			<span class="mui-icon mui-icon-mic" onclick="startaptureAudio()"></span>
		</div>
		
		<div class="mui-content mui-scroll-wrapper outer">
			<div class="mui-scroll">
				<div id="outerTopBox" class="outer-box test">3221321</div>
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div id="searchSlider" class="mui-scroll">
							<a id="tab1" class="mui-control-item mui-active" href="#c1">tab1</a>
							<a id="tab2" class="mui-control-item" href="#c2">tab2</a>
							<a id="tab3" class="mui-control-item" href="#c3">tab3</a>
							<a id="tab4" class="mui-control-item" href="#c4">tab4</a>
							<a id="tab5" class="mui-control-item" href="#c5">tab5</a>
							<a id="tab6" class="mui-control-item" href="#c6">tab6</a>
							<a id="tab7" class="mui-control-item" href="#c7">tab7</a>
						</div>
					</div>
					<div id="searchSliderGroup" class="mui-slider-group">
						<div id="c1" class="mui-slider-item mui-control-content mui-scroll-wrapper inner mui-active">
							<div id="cScroll1" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
								</div>
							</div>
						</div>
						
						<div id="c2" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll2" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
								</div>
							</div>
						</div>
						
						<div id="c3" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll3" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
								</div>
							</div>
						</div>
						
						<div id="c4" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll4" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
									<div class="test test2">0-3221321111111</div>
								</div>
							</div>
						</div>
						
						<div id="c5" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll5" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
									<div class="test test2">0-3221321111111</div>
									<div class="test test2">0-32213211111111</div>
								</div>
							</div>
						</div>
						
						<div id="c6" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll6" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
									<div class="test test2">0-3221321111111</div>
									<div class="test test2">0-32213211111111</div>
									<div class="test test2">0-322132111111111</div>
								</div>
							</div>
						</div>
						
						<div id="c7" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll7" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box"></div>
							</div>
						</div>
				    </div>
				</div>
			</div>
		</div>
		<div class="brf">
			<div id="outerY"></div>
			<div id="innerY"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/nest.scroll.tab.pullToRefresh.js"></script>
	
	<script type="text/javascript">
		mui.init();
		alert(123123132);
		
		// 初始化内外部滚动 和 上拉加载
		initScrollAndPullToRefresh();
		
		// 标签页监听
		document.getElementById('slider').addEventListener('slide', function(e) {
			activeSlide = e.detail.slideNumber;
		
			refreshSlideScrollAndPullUp();
		});
		
		// 上拉加载回调
		function loadData() {
			console.log('loadData start -> ');
			var activeScroll = getActiveSlideScroll();
			setTimeout(function() {
				console.log('loadData start render -> ');
				for (var i = 0; i < 10; i++) {
					var div = document.createElement('div');
					div.innerHTML = '第 ' + num + '-' + i + '个div!!!';
					activeScroll.querySelector('.list-box').appendChild(div);
				}
				num++;
				console.log('num -> ' + num);
				endPullUpToRefresh(activeScroll, num > 2);
			}, 500);
		}
	</script>
</html>
